<template>
    <div class="wrap">
        <ul>
            <li v-for="item in shuiguocha">
                <div>{{ item.tea }}</div>
                <div>{{ item.teasc }}</div>
                <div @click="buy">{{ buyWe?"打包": "堂食" }}</div>
                <div>消费金额：{{ item.money }}元</div>
                <div>
                    <span>订单数量:</span>
                    <span>
                        <el-Button @click="jia(item.id)">+</el-Button>&nbsp;
                        <el-Button @click="jian(item.id)">-</el-Button>
                    </span>
                    {{ item.num || 1 }}
                </div>
                <div>总价:</div>
                <div>立即支付</div>
            </li>
        </ul>

    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import $api from '@/api';
import { assign } from 'lodash';

const shuiguocha = ref([])
const route = useRoute()
const orderList = ref([])
const or = ref(1)
const eat = ref(false)
const we = ref("堂食")
const buyWe = ref(false)

const buy = () => {
    buyWe.value = !buyWe.value
}
const getData = async (id) => {
    const res = await $api.get(`/shuiguocha`,
    )
    console.log("res1", res);
    const { status, data } = res;
    if (status === 200) {
        console.log("data.data", data.data);
        assign(shuiguocha.value, data.data)
        console.log("SHUIGUO", shuiguocha);
        return true
    }
    return ElMessage.error("getData, this is a error message.");
}
const addData = async () => {
    const res = await axios.post(
        "http://localhost:3030/order",
        {
            orderid: shuiguocha.value.id,
            ordertea: shuiguocha.value.tea,
            ordermoney: shuiguocha.value.money,
            ordernum: or,
        },

    );
    const { status } = res;
    if (status !== 201) return ElMessage.success("添加成功");
    getData();
}
onMounted(getData)

const jia = (id)=>{
  buycar.value.forEach(t=>{
    if(t.id==id){
      if(!t.num){
        t.num = 2
        or.value = t.num
      }else{
        t.num ++
        or.value = t.num
      }
    }
  })
}

const jian = (id)=>{
  buycar.value.forEach(t=>{
    console.log("t.money",t.money);
    if(t.id==id){
      if(!t.num||t.num==0){
        buycar.value=buycar.value.filter(t=>t.id!=id)
      }
      if(t.num>0){
        t.num--
        or.value = t.num
      }
    }
  })
}
</script>

<style>
.wrap {
    width: 400px;
    height: 400px;
    display: flex;
    font-size: 40px;
    flex-direction: column;
    margin: auto;
    background-color: bisque;
}
</style>